import './style.css'
import Map from 'ol/Map.js'
import { fromLonLat } from 'ol/proj'
import TileLayer from 'ol/layer/Tile.js'
import View from 'ol/View.js'
import XYZ from 'ol/source/XYZ'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import GeoJSON from 'ol/format/GeoJSON.js'
import { gcj02towgs84 } from '@/utils/coordinate-util.js'
import { Feature, Overlay } from 'ol'
import { Point } from 'ol/geom'
import { geomStyles } from '@/utils/map/geomStyle'
// import Vue from 'vue'
// import { Style, Circle, Stroke, Icon, Fill } from 'ol/style'

class OlMap {
  constructor(containerId, center, baseMapType = 'img') {
    this.baseMapType = baseMapType
    const layers = [
      new TileLayer({
        name: 'BaseAnnotation',
        visible: true,
        source: new XYZ({
          url: 'https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=b48998cf12f83e0215989b14acf59e3f'
        }),
        zIndex: 2
      }),
      new TileLayer({
        name: 'BaseVec',
        visible: baseMapType === 'vec',
        source: new XYZ({
          url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=b48998cf12f83e0215989b14acf59e3f'
        }),
        zIndex: 1
      }),
      new TileLayer({
        name: 'BaseImg',
        visible: baseMapType === 'img',
        source: new XYZ({
          url: 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b48998cf12f83e0215989b14acf59e3f'
        }),
        zIndex: 0
      })
    ]

    const view = new View({
      center: fromLonLat(center),
      zoom: 10
    })
    const map = new Map({
      target: containerId,
      layers,
      view
    })
    this.map = map
    this.layers = layers
    this.view = view
  }

  addVectorLayer(layerUrl, style) {
    const layer = new VectorLayer({
      style,
      source: new VectorSource({
        url: layerUrl,
        format: new GeoJSON()
      })
    })
    this.addLayer(layer)
  }

  addLayer(newLayer) {
    // let newLayer
    this.map.addLayer(newLayer)
    this.layers.push(newLayer)
  }

  removeLayer(layer) {
    this.map.removeLayer(layer)
    const index = this.layers.indexOf(layer)
    this.layers.splice(index, 1)
  }

  // 根据点列表添加点图层 @option 主要包含两个参数{ type（图层类型：airport,accident等），amap_coord（是否是高德坐标，布尔值）}
  addPoints(dataList, option) {
    if (dataList?.length > 0) {
      // feature集合
      const Features = []
      dataList.map((item) => {
        // 用于存放经纬度
        const lngLat = []
        // 如果是高德坐标系，则需要转化
        if (option?.amap_coord) {
          const coord = gcj02towgs84(parseFloat(item?.longitude || item?.lng), parseFloat(item?.latitude || item?.lat))
          lngLat.push(coord.longitude, coord.latitude)
        } else {
          lngLat.push(parseFloat(item?.longitude || item?.lng), parseFloat(item?.latitude || item?.lat))
        }
        // lngLat.push(parseFloat(item?.longitude || item?.lng), parseFloat(item?.latitude || item?.lat))
        // 创建feature
        const feature = new Feature({
          geometry: new Point(fromLonLat(lngLat))
        })
        // 设置属性
        feature.setProperties({
          // 类型
          type: option?.type,
          // 属性
          props: item
        }, false)
        Features.push(feature)
      })
      const pointLayer = new VectorLayer({
        source: new VectorSource({
          features: Features
        }),
        style: (feature) => {
          // 根据type设置不同的点图层样式
          return geomStyles(
            option?.type,
            feature.getProperties().props
          )
        },
        zIndex: option?.zIndex || 9
      })
      this.addLayer(pointLayer)
      // return {
      //   pointLayer,
      //   Features
      // }
    }
  }

  // createAirportPopup(props) {
  //   const VueInstance = Vue.extend(airportPopup)
  //   const vm = new VueInstance({
  //     propsData: {
  //       feature: props
  //     }
  //   }).$mount(document.createElement('div'))
  //   return vm.$el
  // }

  // showAirportPopup(props) {
  //   const document = this.createAirportPopup(props)

  // }
}

export default OlMap
